<template>
  <div>
    <el-row class="harder-row">账户明细</el-row>
    <el-card>
      <el-form inline>
        <el-row>
          <!-- 下拉菜单区域 -->
          <el-col :span="6">
            <div class="grid-content bg-purple-dark">
              <el-form-item label="交易类型:">
                <el-select placeholder="全部" v-model="qureyInfo.user">
                  <el-option
                    v-for="(v, i) in getUser"
                    :key="i"
                    :label="v"
                    :value="v"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 订单号管理区域 -->
          <el-col :span="8">
            <div class="grid-content bg-purple-dark">
              <el-form-item label="订单号/提现单号:"></el-form-item>
              <el-input
                class="boxMin"
                type="input"
                v-model="sbsbsbsb"
              ></el-input>
            </div>
          </el-col>
          <!-- 日期格式处理区域 -->
          <el-col :span="10">
            <div class="grid-content bg-purple-dark">
              <el-form-item label="日期:">
                <el-date-picker
                  class="Box"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  v-model="value1"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 按钮区域 -->
        <el-row>
          <el-col :span="6" :offset="18">
            <div class="grid-content bg-purple-light">
              <el-button @click="querydData">查询</el-button>
              <el-button @click="resetData">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <!-- 总订单 退款收益区域 -->
      <el-row class="grid-contentBox statistics">
        <!-- <el-col :span="4">
        <div class="grid-content bg-purple">
          总订单收款:
          <span>{{ this.cyclicData.totalOrderCollections + '元' }}</span>
        </div>
      </el-col> -->
        <el-col :span="4">
          <div
            class="item"
            style="background: linear-gradient(to right, #f01f62, #f255bc);"
          >
            <i class="el-icon-cherry icons"></i>
            <div class="num">
              <span class="sum">{{
                cyclicData.totalOrderCollections + '元'
              }}</span>
              <span>总订单收款</span>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="4">
        <div class="grid-content bg-purple-light">
          总订单退款:
          <span>{{ this.cyclicData.totalOrrderRefunds + '元' }}</span>
        </div>
      </el-col> -->
        <el-col :span="4">
          <div
            class="item"
            style="background: linear-gradient(to right, #F98137, #F9BE64);"
          >
            <i class="el-icon-grape icons"></i>
            <div class="num">
              <span class="sum">{{
                cyclicData.totalOrrderRefunds + '元'
              }}</span>
              <span>总订单退款</span>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="4">
        <div class="grid-content bg-purple">
          总订单收益:
          <span>{{ this.cyclicData.totalOrrderrevenues + '元' }}</span>
        </div>
      </el-col> -->
        <el-col :span="4">
          <div
            class="item"
            style="background: linear-gradient(to right, #8755D7, #7B89F8);"
          >
            <i class="el-icon-watermelon icons"></i>
            <div class="num">
              <span class="sum">{{
                cyclicData.totalOrrderrevenues + '元'
              }}</span>
              <span>总订单收益</span>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="4">
        <div class="grid-content bg-purple-light">
          账户总收益:
          <span>{{ this.cyclicData.totalAccountIncomes + '元' }}</span>
        </div>
      </el-col> -->
        <el-col :span="4">
          <div
            class="item"
            style="background: linear-gradient(to right, #79D724, #ABEE4C);"
          >
            <i class="el-icon-apple icons"></i>
            <div class="num">
              <span class="sum">{{
                cyclicData.totalAccountIncomes + '元'
              }}</span>
              <span>账户总收益</span>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="4">
        <div class="grid-content bg-purple">
          已提现现金:
          <span>{{ this.cyclicData.cashWithdrawns + '元' }}</span>
        </div>
      </el-col> -->
        <el-col :span="4">
          <div
            class="item"
            style="background: linear-gradient(to right, #15CEF2, #90DEED);"
          >
            <i class="el-icon-pear icons"></i>
            <div class="num">
              <span class="sum">{{ cyclicData.cashWithdrawns + '元' }}</span>
              <span>总提现金额</span>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-table :data="temporaryData" style="width: 100%">
        <el-table-column prop="array" label="交易类型"></el-table-column>
        <el-table-column prop="sss" label="订单号/提现单号"></el-table-column>
        <el-table-column prop="sssss" label="订单金额"></el-table-column>
        <el-table-column prop="asd" label="交易时间"></el-table-column>
        <el-table-column prop="bbbbbb" label="交易前金额"></el-table-column>
        <el-table-column prop="aaaaa" label="交易后金额"></el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfoes.pagenum"
          :page-sizes="[1, 3, 5, 15]"
          :page-size="queryInfoes.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// import Mock from 'mockjs'

export default {
  name: 'ShopDetails',
  data() {
    return {
      // 下拉数据存放
      getUser: [],
      queryInfoes: {
        // 查询参数
        query: '',
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 5
      },
      // 页码
      total: 15,
      qureyInfo: {
        user: ''
      },

      // 处理时间日期
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: '',
      // 表格数据
      getForm: [],
      // 临时数据
      temporaryData: [],
      // 输入框
      sbsbsbsb: '',
      // 订单总数据
      cyclicData: {
        // 订单总收款
        totalOrderCollection: '',
        totalOrderCollections: '',
        // 订单总退款
        totalOrrderRefund: '',
        totalOrrderRefunds: '',
        // 订单总收益
        totalOrrderrevenue: '',
        totalOrrderrevenues: '',
        //  账户总收益
        totalAccountIncome: '',
        totalAccountIncomes: '',
        //  已提现现金
        cashWithdrawn: '',
        cashWithdrawns: ''
      },
      // 交易之后的金额
      calculationAmount: {
        // 提现和订单退款
        calculateRefund: '',
        // 订单收款和素材收益
        calculateCollection: ''
      }
    }
  },
  mounted() {},
  async created() {
    const res = await this.$http.get('shopAccount')
    this.getUser = res.data.shopAccount.array

    // 提现
    const s = await this.$http.get('transaction')
    this.getForm = s.data.transaction
    this.getDataUser()
    this.temporaryData = this.getForm.slice(0, this.queryInfoes.pagesize)
    this.getDataInfo()
  },
  methods: {
    // 每页查询的条数的数据
    handleSizeChange(newsize) {
      this.queryInfoes.pagesize = newsize

      const data = this.queryInfoes.pagesize * this.queryInfoes.pagenum

      this.temporaryData = this.getForm.slice(0, data)
    },
    // 当前页码的数据
    handleCurrentChange(curren) {
      this.queryInfoes.pagenum = curren
      // 跳过数据条数
      const limt = this.queryInfoes.pagesize * (this.queryInfoes.pagenum - 1)
      // 显示条数
      const data = this.queryInfoes.pagesize * this.queryInfoes.pagenum
      this.temporaryData = this.getForm.slice(limt, data)
    },
    // 查询订单号
    querydData() {
      this.temporaryData = this.getForm
      if (this.sbsbsbsb) {
        let fuck = []
        fuck = this.getForm.filter(v => {
          // if (v.sss === this.sbsbsbsb) {
          //   return adadadad.push(v)
          // }
          return v.sss === this.sbsbsbsb
        })
        this.temporaryData = fuck
        console.log(fuck)
      }

      // 查询下拉菜单的数据
      if (this.qureyInfo.user) {
        this.temporaryData = this.temporaryData.filter(v => {
          return v.array === this.qureyInfo.user
        })
      }

      // 把查询到的订单号赋值给这个临时变量

      // 如果输入框为空就显示全部数据
      // if (this.sbsbsbsb.length === 0) {
      //   return (this.temporaryData = this.getForm)
      // }
      console.log(this.temporaryData)
    },
    // 重置
    resetData() {
      this.sbsbsbsb = ''
      this.qureyInfo.user = ''
      if (this.sbsbsbsb.length === 0) {
        return (this.temporaryData = this.getForm)
      }
    },
    // 交易之后的金额
    getDataUser() {
      this.getForm.forEach(v => {
        if (v.array === '提现' || v.array === '订单退款') {
          return (v.aaaaa = (v.bbbbbb - v.sssss).toFixed(2))
        }
        if (v.array === '订单收款' || v.array === '素材收益') {
          return (v.aaaaa = (v.bbbbbb + v.sssss).toFixed(2))
        }
      })
    },
    // 获取订单总数据
    getDataInfo() {
      let totalOrderCollection = 0
      let totalOrrderRefund = 0
      let totalOrrderrevenue = 0
      let totalAccountIncome = 0
      let cashWithdrawn = 0
      this.getForm.forEach(v => {
        // 如果是订单退款的话就把它的钱相加
        if (v.array === '订单退款') {
          totalOrrderRefund += v.sssss
        }
        // 如果是订单收款的话就把它的钱相加
        if (v.array === '订单收款') {
          totalOrrderrevenue += v.sssss
        }
        // 如果是订单收款和素材收益的话就把它的钱相加
        if (v.array === '订单收款' || v.array === '素材收益') {
          totalAccountIncome += v.sssss
        }

        // 如果是提现的话就把它的钱相加
        if (v.array === '提现') {
          cashWithdrawn += v.sssss
        }
        totalOrderCollection += v.sssss
      })

      // 订单总收款 这里把它变成后面只有两位小数
      this.cyclicData.totalOrderCollections = totalOrderCollection.toFixed(2)
      // 订单总退款 这里把它变成后面只有两位小数
      this.cyclicData.totalOrrderRefunds = totalOrrderRefund.toFixed(2)
      // 订单总收款 这里把它变成后面只有两位小数
      this.cyclicData.totalOrrderrevenues = totalOrrderrevenue.toFixed(2)
      // 账户总收益 这里把它变成后面只有两位小数
      this.cyclicData.totalAccountIncomes = totalAccountIncome.toFixed(2)
      // 提现 这里把它变成后面只有两位小数
      this.cyclicData.cashWithdrawns = cashWithdrawn.toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
.harder-row {
  margin-bottom: 10px;
  font-size: 15px;
  color: #333333;
}
.boxMin {
  width: 200px;
}
/deep/.block {
  width: 100px;
}
.grid-contentBox {
  margin: 20px 0;
}
.grid-content {
  font-size: 14px;
  color: #333333;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
/deep/.block {
  margin-top: 10px;
}
.grid-content span {
  color: #f90f0f;
  font-size: 18px;
}
.Box {
  margin-left: 15px;
}
.statistics {
  .item {
    width: 170px;
    height: 80px;
    border-radius: 5%;
    color: #fff;
    display: flex;
    .icons {
      font-size: 40px;
      margin: 24px 0 0 10px;
    }
    .num {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      padding: 15px;
      .sum {
        font-size: 20px;
      }
    }
  }
}
</style>
